<script setup lang="ts">
import { ref } from "vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useNotifyTemplate } from "./utils/hook";

import Plus from "~icons/ep/plus";
import EditPen from "~icons/ep/edit-pen";
import Delete from "~icons/ep/delete";
import Refresh from "~icons/ep/refresh";
import View from "~icons/ep/view";
import Finished from "~icons/ep/finished";
import Close from "~icons/ep/close";

defineOptions({ name: "NotifyTemplate" });

const tableRef = ref();

const {
  filterForm,
  statusOptions,
  categories,
  channelOptions,
  pagination,
  tableData,
  columns,
  loading,
  handleSearch,
  handleResetFilters,
  handlePageChange,
  handleSizeChange,
  openCreate,
  openEdit,
  handleToggleStatus,
  handleDelete,
  channelLabel,
  previewContent
} = useNotifyTemplate();
</script>

<template>
  <div class="notify-template-page">
    <el-form
      :inline="true"
      :model="filterForm"
      class="search-form bg-bg_color w-full pl-4 pt-3 pb-2 overflow-auto"
    >
      <el-form-item label="关键字：" prop="keyword">
        <el-input
          v-model.trim="filterForm.keyword"
          placeholder="模板名称 / 类型 / 标题"
          clearable
          class="w-[220px]!"
        />
      </el-form-item>
      <el-form-item label="分类：" prop="category">
        <el-select
          v-model="filterForm.category"
          placeholder="全部分类"
          clearable
          filterable
          class="w-[180px]!"
        >
          <el-option label="全部分类" value="" />
          <el-option
            v-for="item in categories"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="渠道：" prop="channel">
        <el-select
          v-model="filterForm.channel"
          placeholder="全部渠道"
          clearable
          filterable
          class="w-[160px]!"
        >
          <el-option label="全部渠道" value="" />
          <el-option
            v-for="item in channelOptions"
            :key="item"
            :label="channelLabel(item)"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-select
          v-model="filterForm.status"
          placeholder="全部状态"
          clearable
          class="w-[140px]!"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="handleSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="handleResetFilters">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <PureTableBar
      title="模板管理"
      :columns="columns"
      :tableRef="tableRef"
      @refresh="handleSearch"
      @fullscreen="tableRef.value?.setAdaptive?.()"
    >
      <template #buttons>
        <el-button
          type="primary"
          :icon="useRenderIcon(Plus)"
          @click="openCreate"
        >
          新增模板
        </el-button>
      </template>
      <template #default="{ size, dynamicColumns }">
        <PureTable
          ref="tableRef"
          v-loading="loading"
          row-key="id"
          :columns="dynamicColumns"
          :data="tableData"
          :size="size"
          :pagination="pagination"
          adaptive
          :adaptiveConfig="{ offsetBottom: 48 }"
          @page-current-change="handlePageChange"
          @page-size-change="handleSizeChange"
        >
          <template #content="{ row }">
            <el-popover
              v-if="row.content && row.content.length > 80"
              placement="top-start"
              width="420"
              trigger="hover"
            >
              <template #reference>
                <span class="content-preview">
                  {{ previewContent(row) }}
                  <el-icon class="content-preview__icon">
                    <View />
                  </el-icon>
                </span>
              </template>
              <div class="content-popover">
                {{ row.content }}
              </div>
            </el-popover>
            <span v-else>{{ row.content || "-" }}</span>
          </template>
          <template #channels="{ row }">
            <el-space wrap :size="6">
              <el-tag
                v-for="(config, key) in row.channels"
                :key="key"
                :type="config.enabled ? 'success' : 'info'"
                size="small"
                effect="plain"
              >
                {{ channelLabel(key) }}
              </el-tag>
              <el-tag
                v-if="!row.channels || Object.keys(row.channels).length === 0"
                size="small"
                effect="plain"
              >
                -
              </el-tag>
            </el-space>
          </template>
          <template #status="{ row }">
            <el-tag
              :type="row.status === 1 ? 'success' : 'danger'"
              size="small"
              effect="plain"
            >
              {{ row.status === 1 ? "启用" : "停用" }}
            </el-tag>
          </template>
          <template #operation="{ row, size }">
            <el-button
              class="reset-margin"
              link
              type="primary"
              :icon="useRenderIcon(EditPen)"
              :size="size"
              @click="openEdit(row)"
            >
              编辑
            </el-button>
            <el-button
              class="reset-margin"
              link
              :type="row.status === 1 ? 'warning' : 'success'"
              :icon="useRenderIcon(row.status === 1 ? Close : Finished)"
              :size="size"
              @click="handleToggleStatus(row)"
            >
              {{ row.status === 1 ? "停用" : "启用" }}
            </el-button>
            <el-popconfirm
              :title="`确认删除模板「${row.name}」吗？`"
              @confirm="handleDelete(row)"
            >
              <template #reference>
                <el-button
                  class="reset-margin"
                  link
                  type="danger"
                  :icon="useRenderIcon(Delete)"
                  :size="size"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </PureTable>
      </template>
    </PureTableBar>
  </div>
</template>

<style scoped>
.notify-template-page {
  padding: 12px 12px 20px;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 12px;
}

.content-preview {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--el-color-primary);
  cursor: pointer;
}

.content-preview__icon {
  font-size: 14px;
}

.content-popover {
  white-space: pre-wrap;
  line-height: 1.5;
  word-break: break-word;
}
</style>
